<template>
  <el-dialog
      title="预览方案管理"
      :visible="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      @open="onOpen"
  >
    <el-row>
      <el-col :span="24">
        <el-button style="float: right" type="primary" @click="onAdd">新增方案</el-button>
      </el-col>
    </el-row>
    <!--    表格数据-->
    <div style="margin-top: 20px;">
      <el-table
          :data="dataSource"
          border
          style="width: 100%">
        <el-table-column
            prop="schemeName"
            label="方案名称"
            align="center"
            width="400">
        </el-table-column>
        <el-table-column
            prop="channelsNum"
            align="center"
            label="通道数">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="onEdit(scope)">编辑</el-button>
            <el-button type="text" @click="onDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialogs">
      <SchemeAdd ref="SchemeAdd" :treeData="treeData"></SchemeAdd>
    </div>
  </el-dialog>
</template>

<script>
import SchemeAdd from "./SchemeAdd";

export default {
  name: "PreselectedScheme",
  components: {SchemeAdd},
  props: {
    dataSource: {//表格数据
      type: Array,
      defaultValue: []
    },
    treeData: {//设备数据
      type: Array,
      defaultValue: []
    }
  },
  data() {
    return {
      dialogVisible: false,//弹窗的显示与隐藏
    }
  },
  methods: {
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    //弹窗打开时触发
    onOpen() {
    },
    //新增方案
    onAdd() {
      this.$refs.SchemeAdd.dialogVisible = true
    },
    //编辑
    onEdit(item) {
      console.log(item)
    },
    //删除
    onDelete(item) {
      console.log(item)
    }
  }
}
</script>

<style scoped>

</style>
